<!--总公司查看申诉列表页面-->
<script setup>
import OperaHeader from '../components/OperaHeader.vue'
import AppealTypeSelector from '../components/AppealTypeSelector'
import axios from "axios";
import { ElMessage } from 'element-plus';
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import {statusText} from '../const'
var role = localStorage.getItem('role')
var isCompany = ref(true)
var lastPage = ref(0)
var total = ref(0)
var page = ref(1)
const pageSize = 10

var tableData = ref([])
const router = useRouter()

function handleClick(index, row) {
  sessionStorage.setItem('isAppeal', true)
  sessionStorage.setItem('appealDate', row.appealDate)
  sessionStorage.setItem('description', row.remark)
  sessionStorage.setItem('illegalType', row.illegalContent)
  sessionStorage.setItem('petrolName', row.deptName)
  sessionStorage.setItem('photo', row.illegalPhoto)
  sessionStorage.setItem('aid', row.id)
  sessionStorage.setItem('dateTime', row.illegalDate)
  sessionStorage.setItem('status', row.status)
  sessionStorage.setItem('appealPhoto', row.appealPhoto)
  router.push({
    path: '/main/violationDetail',
    // query:{
    //   appealDate:row.appealDate,
    //   date:row.date,
    //   description:row.description,
    //   aid:row.aid,
    //   illegalType:row.illegalType,
    //   petrolName:row.pid,
    //   photo:row.provePhoto,
    //   pid:row.pid,
    //   time:row.time
    // }
  })
}

const status = ref(0)
function handleSearch() {
  const data = {
    pageNum: page.value,
    pageSize,
    status:status.value
  }
  const params = new URLSearchParams(data).toString()
  axios.get(`/system/violation/appeal?${params}`).then(res => {
    if (res.data.code != 200) ElMessage.error(res.data.msg)
    else {
      const {msg, code, rows, total: tTotal} = res.data
      tableData.value = rows
      total.value = tTotal
    }
  })
}
handleSearch()
function handlePageChange(currentPage) {
  page.value = currentPage
  handleSearch()
}

</script>

<template>
  <h1 class="pageTitle">待审核申诉</h1>
  <OperaHeader @submit="handleSearch">
    <AppealTypeSelector v-model="status"></AppealTypeSelector>
  </OperaHeader>
  <div style=" margin-left: 5%; margin-top: 10px; margin-bottom: 30px; color: #ffde59; text-align: left;">
  </div>
  <div class="t_background">
    <div class="tmainBody">
      <el-table stripe :data="tableData" :header-cell-style="{ 'text-align': 'center' }" style="width: 100%">
        <el-table-column prop="appealDate" label="申诉时间" align="center" />
        <el-table-column prop="deptId" label="加油站编号" align="center" />
        <el-table-column prop="deptName" label="加油站名称" align="center" />
        <el-table-column prop="illegalContent" label="违规类型" align="center" />
        <el-table-column prop="status" label="状态" align="center" :formatter="(_, _c, value) => statusText[value + 1]" />
        <el-table-column prop="links" label="操作" align="center">
          
          <template #default="scope">
            <el-link @click="handleClick(scope.$index, scope.row)">查看详情</el-link>
          </template>
        </el-table-column>

      </el-table>
      <!-- 分页 -->
      <el-row>
        <el-col>
          <el-pagination background hide-on-single-page layout="prev, pager, next" @current-change="handlePageChange"
            :total="total" :default-page-size="pageSize" />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<style scoped>
.t_background {
  width: 90%;
  background-color: #ffffff;
  margin: auto;
}

h1 {
  color: var(--page-title-color);
}

.tmainBody {
  width: 90%;
  margin: 5% auto 0;
}

.tmainBody>>>.el-table__row>td {
  /* 去除表格线 */
  border: none;
}

.el-row,
.el-pagination {
  width: fit-content;
  margin: 10px auto;

}
</style>
